<?php use_helper('I18N') ?>
<html>
<head>
    <?php include('scripts.php'); ?>

    <style type="text/css">
    .login_tt31 {
        color: #FFFFFF;
        float: left;
        font-family: Verdana;
        font-size: 16px;
        font-weight: bold;
        line-height: 18px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-align: center;
        width: 100%;
    }
    .login_t11 {
        color: #FFFFFF;
        text-decoration: underline;
    }
    a {
        outline: medium none;
    }
    .keyboard.ui-widget {
        font-size: 0.7em;
    }
    .font {
        font-size: 14px;
        color: #f9c81e;
        font-family: arial;
    }
    .error-font {
        font-size: 14px;
        color: #990033;
        font-family: arial;
    }
    </style>

    <script>
	$(function() {
		$(".keyboard").button();
		$(".keyboard").click(function(event) {
            var qVal = $("#btnQ").attr("ref");
            var isUpper = false;

            if (qVal == "Q") {
                isUpper = true;
            }
            if ($(this).attr("ref") == "caps" || $(this).attr("ref") == "Shift") {
                $(".keyboard").not('#btnDelete,#btnCaps,#btnShift').each(function (key, value) {
                    //console.log("value",$(value));
                    //console.log("children",$(value).children());
                    //console.log("children text",$(value).children().html().toUpperCase());
                    if (isUpper == false) {
                        $(value).attr("ref", $(value).children().html().toUpperCase());
                        $(value).children().html($(value).children().html().toUpperCase());
                    } else {
                        $(value).attr("ref", $(value).children().html().toLowerCase());
                        $(value).children().html($(value).children().html().toLowerCase());
                    }
                });
                if ($(this).attr("kv") == "0") {
                    $(this).attr("kv", "1")
                }
            } else {
                $("#userpassword").val($("#userpassword").val() + $(this).attr("ref"));
                if ($("#btnShift").attr("kv") == "1") {
                    $(".keyboard").not('#btnDelete,#btnCaps,#btnShift').each(function (key, value) {
                        if (isUpper == false) {
                            $(value).attr("ref", $(value).children().html().toUpperCase());
                            $(value).children().html($(value).children().html().toUpperCase());
                        } else {
                            $(value).attr("ref", $(value).children().html().toLowerCase());
                            $(value).children().html($(value).children().html().toLowerCase());
                        }
                    });
                    $("#btnShift").attr("kv", "0");
                }
            }
            return false;
        });

        $("#btnDelete").button({
            icons: {
                primary: "ui-icon-arrowthick-1-w"
            },
            text: false
        }).click(function() {
            $("#userpassword").val("");
            return false;
        });

        $("#lang").change(function() {
            $("#langForm").submit();
        });

        $("#userpassword").keypress(function(){
            alert("Please use virtual keyboard!!");
        });
        $("#btnLogin").click(function(){

        });

        $("#captchaimage").bind('click', function() {
            $.post('/captcha/newSession');
            $("#captchaimage").load('/captcha/imageRequest');
            return false;
        });

        $("#loginForm").validate({
            rules: {
                <?php if (sfConfig::get('sf_environment') == Globals::SF_ENVIRONMENT_PROD) { ?>
                captcha: {
                    required: true,
                    remote: "/captcha/process"
                }
                <?php } ?>
            },
            messages: {
                captcha: "Correct captcha is required."
            },
            submitHandler: function(form) {
                <?php if (sfConfig::get('sf_environment') == Globals::SF_ENVIRONMENT_PROD) { ?>
                if ($.trim($("#username").val()) == "") {
                    alert("Shareholder ID cannot be blank.");
                    $("#username").focus();
                    return false;
                }
                if ($.trim($("#userpassword").val()) == "") {
                    alert("Password cannot be blank.");
                    $("#userpassword").focus();
                    return false;
                }
                <?php } ?>
                form.submit();
            }
        });
	});
	</script>
</head>
<center>
    <body bgcolor="#150c03" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (Log In.psd) -->
    <table id="Table_01" width="1251" height="601" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td colspan="2">
                <img src="/images/layout/Log-In_01.jpg" width="365" height="123" alt=""></td>
            <td colspan="5" rowspan="3">
                <img src="/images/layout/Log-In_02.jpg" width="701" height="237" alt=""></td>
            <td rowspan="2" background="/images/layout/Log-In_03.jpg" width="184" height="124" alt="">

                <form method=post action="/home/language" id="langForm" name="langForm">
                    <select name="lang" id="lang">
                        <option value="en"
                          <?php
                            if ($sf_user->getCulture() == "en")
                            echo 'selected'
                            ?>
                            >English</option>
                        <option value="cn"
                          <?php
                            if ($sf_user->getCulture() == "cn")
                            echo 'selected'
                            ?>
                        >中文</option>
                    </select><br>
                </form>

            </td>
            <td>
                <img src="/images/layout/spacer.gif" width="1" height="123" alt=""></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">
                <img src="/images/layout/Log-In_04.jpg" width="365" height="114" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="1" height="1" alt=""></td>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="/images/layout/Log-In_05.jpg" width="184" height="428" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="1" height="113" alt=""></td>
        </tr>
        <tr>
            <td rowspan="3">
                <img src="/images/layout/Log-In_06.jpg" width="185" height="315" alt=""></td>
            <td colspan="2" background="/images/layout/Log-In_07.jpg" width="224" height="36" alt="">

                <font face="arial" size="2" color="#f9c81e" align="justify"> <b>
                    <br/><?php echo __('Share Holder Login') ?>
                </font>

            </td>
            <td colspan="4">
                <img src="/images/layout/Log-In_08.jpg" width="657" height="36" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="1" height="36" alt=""></td>
        </tr>
        <tr>
            <td colspan="3" background="/images/layout/Log-In_09.jpg" width="339" height="190" alt="">

                <form action="/home/doLogin" id="loginForm" method="post">
                    <table cellpadding="1" cellspacing="0" width="100%">
                        <tr>
                            <td><span class="font"><?php echo __('Shareholder ID') ?> :</span></td>
                            <td align="right"><input type="text" name="username" id="username" style="width:200px"></td>
                        </tr>
                        <tr>
                            <td><span class="font"><?php echo __('Password') ?> :</span></td>
                            <td align="right"><input type="password" name="userpassword" id="userpassword" readonly="readonly" style="width:200px"></td>
<!--                            <td align="right"><input type="password" name="userpassword" id="userpassword" size="30"></td>-->
                        </tr>
                        <tr>
                            <td>
                                <div id="captchaimage" style="height: 32; width: 82">
                                    <a href="<?php echo $_SERVER['PHP_SELF']; ?>" id="refreshimg" title="Click to refresh image"><img src="/captcha/image?<?php echo time(); ?>" width="90" height="30" alt="Captcha image" style="border-style: none"/></a>
                                </div>
                            </td>
                            <td align="right"><input type="text" name="captcha" id="captcha" style="width:200px">
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td align="right">&nbsp;
                                <?php if ($sf_flash->has('errorMsg')): ?>
                                  <span class="error-font"><?php echo $sf_flash->get('errorMsg') ?></span>
                                <?php endif; ?>
                            </td>
                        </tr>
                        <tr>
                                <?php
                                if($tbl_setting->getFValue()=='0'){
                                	echo '<td></td><td align="right">';
                                	echo '<input type="image" border="0" src="/images/layout/gold_t4_mu_'.$sf_user->getCulture().'.jpg" id="btnLogin" name="btnLogin">';
                                	echo '</td>';
                                }else{
                                	echo '<td align="left" colspan="2">';
                                	echo '<span class="font">'.__('Our web server is in the midst of maintenance. We are sorry for any inconvenience caused.').'</span>';
                                	echo '</td>';
                                }
                                ?>
                        </tr>
                        <tr>
                            <td></td>
                            <td align="right">
                                <a href="/member/register" class="login_t11"><?php echo __('Register') ?></a>
                                <a href="#" class="login_t11" id="HyperLink1"><?php echo __('Forget Password?') ?></a></td>
                        </tr>
                    </table>

                    <!--<font face="arial" size="2" color="#f9c81e" align="justify"> <b>
                        Name: <input name="Name" value="" size="10"><br>
                        PassWord: <input name="PassWord" value="" size="10"><br>
                        Security Code：<input name="Security" value="" size="10"><br>
                        <center><input type="submit"></center>-->
                </form>

            </td>
            <td rowspan="2">
                <img src="/images/layout/Log-In_10.jpg" width="47" height="279" alt=""></td>
            <td background="/images/layout/Log-In_11.jpg" width="437" height="190" alt="">
                <div class="login_tt31">
                    <?php echo __('For the safest data input use the') ?><br />
                    <?php echo __('virtual keyboard below') ?>
                </div>
                <div style="text-align: center; padding-top: 2px">
                    <button class="keyboard" ref="1">1</button>
                    <button class="keyboard" ref="2">2</button>
                    <button class="keyboard" ref="3">3</button>
                    <button class="keyboard" ref="4">4</button>
                    <button class="keyboard" ref="5">5</button>
                    <button class="keyboard" ref="6">6</button>
                    <button class="keyboard" ref="7">7</button>
                    <button class="keyboard" ref="8">8</button>
                    <button class="keyboard" ref="9">9</button>
                    <button class="keyboard" ref="0">0</button>
                    <button class="keyboard" ref="delete" id="btnDelete">delete</button>
                </div>
                <div style="text-align: center; padding-top: 2px">
                    <button class="keyboard" ref="q" id="btnQ">q</button>
                    <button class="keyboard" ref="w">w</button>
                    <button class="keyboard" ref="e">e</button>
                    <button class="keyboard" ref="r">r</button>
                    <button class="keyboard" ref="t">t</button>
                    <button class="keyboard" ref="y">y</button>
                    <button class="keyboard" ref="u">u</button>
                    <button class="keyboard" ref="i">i</button>
                    <button class="keyboard" ref="o">o</button>
                    <button class="keyboard" ref="p">p</button>
                </div>
                <div style="text-align: center; padding-top: 2px">
                    <button class="keyboard" ref="caps" id="btnCaps">Caps</button>
                    <button class="keyboard" ref="a">a</button>
                    <button class="keyboard" ref="s">s</button>
                    <button class="keyboard" ref="d">d</button>
                    <button class="keyboard" ref="f">f</button>
                    <button class="keyboard" ref="g">g</button>
                    <button class="keyboard" ref="h">h</button>
                    <button class="keyboard" ref="j">j</button>
                    <button class="keyboard" ref="k">k</button>
                    <button class="keyboard" ref="l">l</button>
                </div>
                <div style="text-align: center; padding-top: 2px">
                    <button class="keyboard" ref="Shift" kv="0" id="btnShift">Shift</button>
                    <button class="keyboard" ref="z">z</button>
                    <button class="keyboard" ref="x">x</button>
                    <button class="keyboard" ref="c">c</button>
                    <button class="keyboard" ref="v">v</button>
                    <button class="keyboard" ref="b">b</button>
                    <button class="keyboard" ref="n">n</button>
                    <button class="keyboard" ref="m">m</button>
                </div>
            </td>
            <td rowspan="2">
                <img src="/images/layout/Log-In_12.jpg" width="58" height="279" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="1" height="190" alt=""></td>
        </tr>
        <tr>
            <td colspan="3">
                <img src="/images/layout/Log-In_13.jpg" width="339" height="89" alt=""></td>
            <td>
                <img src="/images/layout/Log-In_14.jpg" width="437" height="89" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="1" height="89" alt=""></td>
        </tr>
        <tr>
            <td colspan="8">
                <img src="/images/layout/Log-In_15.jpg" width="1250" height="48" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="1" height="48" alt=""></td>
        </tr>
        <tr>
            <td>
                <img src="/images/layout/spacer.gif" width="185" height="1" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="180" height="1" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="44" height="1" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="115" height="1" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="47" height="1" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="437" height="1" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="58" height="1" alt=""></td>
            <td>
                <img src="/images/layout/spacer.gif" width="184" height="1" alt=""></td>
            <td></td>
        </tr>
    </table>
</center>
<!-- End ImageReady Slices -->
</body>
</html>